<template>
  <!-- 房源发布记录弹框 -->
  <base-paenl v-if="isShowList" class="grid-information-dialog" id="gridDialog">
  <!-- <base-paenl class="grid-information-dialog" id="gridDialog"> -->
    <div slot="header" class="header-title" @mousedown="mouseDownLeft($event, 'gridDialog', 100, 600)">房源发布记录</div>
    <div slot="main" class="slot-main">
      <div class="area-select">
        <div class="search-name">搜索</div>
        <el-select v-model="fbztValue" placeholder="已发布" size="mini" popper-class="area-popper" style="width: 110px">
          <el-option v-for="item in fbztOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker
          v-model="dateValue"
          type="month"
          placeholder="请选择月"
          size="mini"
          class="header-data-time-picker"
          :clearable="false"
          :picker-options="pickOptions"
          format="yyyyMM"
          value-format="yyyyMM"
        >
        </el-date-picker>
        <div class="grid-info-operate-div" @click="search">查询</div>
        <div class="grid-info-operate-div" @click="reset">重置</div>
      </div>

      <el-scrollbar style="height: 240px; margin-top: 10px">
        <div class="grid-range-header">
          <div class="row-index"></div>
          <div class="col col4">房源发布码</div>
          <div class="col col3">发布状态</div>
          <div class="col col3">发布人</div>
          <div class="col col3">发布机构</div>
          <div class="col col3">发布渠道</div>
          <div class="col col3">发布时间</div>
          <div class="col col3">详情</div>
        </div>
        <div v-for="(item, index) in tableList" :key="index" class="grid-range-row" @click="goDetail(item)">
          <div class="row-index">{{ index + 1 }}</div>
          <div class="col col4">{{ item.fyfbm }}</div>
          <div class="col col3">{{ item.fbzt }}</div>
          <div class="col col3">{{ item.fbr }}</div>
          <div class="col col3">{{ item.fbjg }}</div>
          <div class="col col3">{{ item.fbqd }}</div>
          <div class="col col3">{{ item.fbsj }}</div>
          <div class="col col3">查看详情</div>
        </div>
      </el-scrollbar>
    </div>
  </base-paenl>
  <base-paenl v-else class="grid-information-dialog" id="gridDialog">
    <div slot="header" class="header-title" @mousedown="mouseDownLeft($event, 'gridDialog', 100, 600)">历史详情</div>
    <div slot="main" class="slot-main">
      <div class="area-select">
        <div class="search-name">坐落</div>
        <div class="detail-title">{{ detailTitle }}</div>
        <div class="grid-info-operate-div" @click="isShowList = true">返回列表</div>
      </div>
      <el-scrollbar style="height: 240px; margin-top: 10px">
        <el-descriptions v-for="(item, index) in detailList" :key="index" :title="item.title" :column="item.column">
          <el-descriptions-item v-for="(list, i) in item.lists" :key="i" :label="list.label">{{
            list.value
          }}</el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { mouseDownLeft } from '@/assets/modules/utils'
import BasePaenl from './CBase.vue'

import { getWgyCkls, getWgyCklsXq } from '@/assets/modules/service'

@Component({
  name: 'CHistory',
  components: {
    BasePaenl
  }
})
export default class extends Vue {
  tableList: any = []
  fbztValue: string = ''
  keyValue: string = ''
  dateValue: any = ''
  fbztOptions: Object[] = [
    {
      value: 'yfb',
      label: '已发布'
    },
    {
      value: 'wfb',
      label: '未发布'
    }
  ]
  detailTitle: string = ''
  detailList: Object[] = [
    {
      title: '签到情况',
      column: 2,
      lists: [
        {
          key: 'createUserName',
          label: '签到人',
          value: ''
        },
        {
          key: 'createTime',
          label: '签到时间',
          value: ''
        },
        {
          label: '填写人',
          value: ''
        },
        {
          label: '联系方式',
          value: ''
        },
        {
          label: '巡查距离',
          value: ''
        },
        {
          label: '异常原因',
          value: ''
        }
      ]
    },
    {
      title: '核查情况',
      column: 2,
      lists: [
        {
          key: 'hcry',
          label: '核查人',
          value: ''
        },
        {
          key: 'hcsj',
          label: '核查时间',
          value: ''
        },
        {
          label: '核查结论',
          value: ''
        },
        {
          label: '核查详情',
          value: ''
        },
        {
          label: '巡查距离',
          value: ''
        },
        {
          label: '异常原因',
          value: ''
        }
      ]
    },
    {
      title: '',
      column: 1,
      lists: [
        {
          label: '地址是否有误',
          value: ''
        },
        {
          label: '是否设有警示标识',
          value: ''
        },
        {
          label: '结构形式和初步判断是否一致',
          value: ''
        },
        {
          label: '层数是否正确',
          value: ''
        },
        {
          label: '户主姓名是否有误',
          value: ''
        },
        {
          label: '户主联系方式是否有误',
          value: ''
        }
      ]
    }
  ]
  isShowList: boolean = true
  pickOptions = {
    disabledDate: (month: any) => {
      return month.getMonth() > new Date().getMonth()
    }
  }
  created() {
    this.getWgyCkls()
  }
  mounted() {}
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight)
  }
  search() {
    this.getWgyCkls(this.fbztValue, this.dateValue)
  }
  reset() {
    this.fbztValue = ''
    this.dateValue = ''
  }
  goDetail(val: any) {
    this.detailTitle = val.dz || '暂无地址'
    getWgyCklsXq(val.sfid).then((res: any) => {
      this.detailList.forEach((i: any) => {
        i.lists.forEach((j: any) => {
          j.value = res.data[j.key] || '无信息'
        })
      })
      this.isShowList = false
    })
  }
  getWgyCkls(lx?: string, key?: string) {
    // 获取房管员历史列表
    const data = {
      hcr: '987654321',
      lx: lx, //类型
      ywlx: key, //业务类型
      jssj: key, //开始时间
      dz: key, //地址
      current: 1,
      size: 10
    }
    getWgyCkls(data).then((res: any) => {
      this.tableList = res?.data.records
    })
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 650px;
  height: 362px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-1.png);
  background-size: 100% 100%;
}
.search-name {
  font-family: AlibabaPuHuiTi_2_85_Bold;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  color: #24e9ea;
}
.detail-title {
  color: #fff;
}
.grid-info-operate-div {
  width: 80px;
  height: 28px;
  background: url('../../assets/images/panels/guijihuifanganniubeijingqian.png');
  background-size: 100% 100%;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
.grid-range-row {
  width: 470px;
  height: 32px;
}
.col1 {
  width: 60px;
  text-align: center;
}
.col2 {
  width: 120px;
  text-align: center;
}
.col3 {
  width: 220px;
  text-align: center;
}
.col4 {
  width: 250px;
  text-align: center;
}
</style>
<style lang="scss">
.grid-information-dialog {
  position: fixed;
  left: 600px;
  top: 100px;
  z-index: 100;
}
.dialog-content-second {
  display: flex;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-size: 16px;
  line-height: 44px;
  // color: #ffffff;
}
.grid-range-row {
  // background-color: rgba(5, 61, 122, 0.25);
  display: flex;
  align-items: center;
  margin: 2px 0;
  color: #fff;
  .row-index {
    width: 26px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #0a559f;
    border-radius: 3px;
  }
  .col {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    line-height: 44px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
<style lang="scss" scoped>
.slot-main {
  ::v-deep .el-descriptions__title {
    color: #3998ff;
  }
  ::v-deep .el-descriptions__body {
    background-color: initial;
    color: #fff;
  }
}
.grid-range-header {
  width: 100%;
  height: 32px;
  background-image: url(../../assets/images/dialogs/tuanchuangbiaotoudikuan.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .row-index {
    width: 26px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 3px;
  }
  .col {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 44px;
    color: #ffffff;
  }
}
.area-select {
  display: flex;
  justify-content: space-between;
  .el-input__inner {
    background-color: #001022;
    border-radius: 4px;
    border: solid 1px #1658a0;
    font-family: AlibabaPuHuiTi_2_45_Light;
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
  }
  .el-select .el-input .el-select__caret {
    color: #ffffff;
    font-size: 16px;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-select .el-input__inner:focus {
    border-color: #1658a0;
  }
  .el-select:hover .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader .el-input .el-input__inner:focus,
  .el-cascader .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader:not(.is-disabled):hover .el-input__inner {
    border-color: #1658a0;
  }

  .el-cascader .el-input .el-icon-arrow-down {
    transition: transform 0.3s;
    font-size: 14px;
  }
  .el-input--mini .el-input__icon {
    line-height: 28px;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: #ffffff;
  }
}
.area-popper {
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_45_Light;
  border: none;
  background-color: rgba(11, 51, 93, 0.95);
  box-shadow: 0px 0px 8px 0px rgba(0, 19, 41, 0.8);
  border-radius: 4px;
  color: #fff;
  .popper__arrow {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .popper__arrow::after {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .el-cascader-menu {
    color: #fff;
    border-right: none;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #3998ff;
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxuanzhongshibeijing.png);
  }
  .el-icon-check:before {
    content: '';
  }
  .el-select-dropdown__item {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    color: #3998ff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxiaoxuanzhongtiao.png);
  }
  .el-scrollbar {
    padding-bottom: 17px !important;
  }
  .el-scrollbar .el-scrollbar__wrap {
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
  }
  .el-scrollbar__view {
    height: calc(100% - 20px);
  }
  .el-scrollbar__thumb {
    background-color: transparent;
  }
  .el-cascader-panel {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .el-radio__input {
      visibility: hidden;
    }
    .el-cascader-node__postfix {
      top: 10px;
    }
  }
  .el-popover__title {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
}
</style>
